<script setup lang="ts">
import { ElRow, ElCol, ElInput, ElAlert } from 'element-plus';
import { ref, onMounted, onUnmounted, watch } from 'vue';
import 'codemirror/mode/javascript/javascript.js';
import Codemirror from 'codemirror-editor-vue3';
import type { CmComponentRef } from 'codemirror-editor-vue3';
import type { Editor, EditorConfiguration } from 'codemirror';
import { DocumentEditor } from '@onlyoffice/document-editor-vue';
const scriptUrl = defineModel('scriptUrl');
const demoFileUrl = defineModel('demoFileUrl');
const demoConfigType = defineModel('demoConfigType');
const demoConfigMode = defineModel('demoConfigMode');
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: 'DownloadDemo',
});

const props = withDefaults(defineProps<Props>(), {});

const getUuid = function () {
  return 'xxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
const title = ref('');
const code = ref(``);
const containerRef = ref();
const cmRef = ref<CmComponentRef>();
const cmOptions: EditorConfiguration = {
  mode: 'text/javascript',
};

const onChange = (val: string, cm: Editor) => {
  // console.log(val);
  // console.log(cm.getValue());
};

const onInput = (val: string) => {
  // console.log(val);
};

const onReady = (cm: Editor) => {
  // console.log(cm.focus());
};

let containerWidth = 0;
let containerHeight = 0;
let documentEditorKey = ref('');
onMounted(() => {
  
});

onUnmounted(() => {
  
});


</script>

<template>
  <di class="onlyoffice_demo_container" ref="containerRef">
    <el-row>
      <el-col :span="24">
        <el-alert
            style="
              height: 30px;
              font-size: 15px;
              font-weight: 600;
              margin-top: 100px;
            "
            title="html地址：http://47.94.91.67/demo_file/html/word_connector.html"
            type="error"
            closable="false"
          />
      </el-col>
      <el-col :span="24">
        <el-alert
            style="
              height: 30px;
              font-size: 15px;
              font-weight: 600;
              margin-top: 50px;
            "
            title="vue3地址：http://47.94.91.67/demo_file/html/vue3_demo.rar"
            type="error"
            closable="false"
          />
      </el-col>
      <el-col :span="24">
        <el-alert
            style="
              height: 30px;
              font-size: 15px;
              font-weight: 600;
              margin-top: 50px;
            "
            title="rect地址：http://47.94.91.67/demo_file/html/rect_demo.rar"
            type="error"
            closable="false"
          />
      </el-col>
    </el-row>
  </di>
</template>

<style scoped>
.onlyoffice_demo_container {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>
